<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	body{
		text-align:center;
		background-color: #000;

	}
	#date,#time{
		margin:10px auto;
	 	height: 100px;
	    color:#fff;
	    line-height: 100px;
    }
	 #date{
	 	width:800px;
	 	font-size:50px;
	 	
	 	
	 }
	 #time{
	 	width:300px;
	 	height: 100px;
	 	font-size:100px;
	 	font-weight: bold;
	 }
	</style>
	<script type="text/javascript">
  //定义一个函数判断时分秒在10以下用0补位
	function getXianShi(h){
       return h<10 ? (h="0"+h) : h=h;
      }
//	return h = h<10 ? ("0"+h) :h;
    window.onload = function(){
    //1.获取节点
    var dateBox = document.getElementById("date");
    // console.log(dateBox);//检测节点是否被获取
    var timeBox = document.getElementById("time");
    // console.log(timeBox);//检测节点是否被获取
   
    function clock(){
   	  //2.给盒子内写入内容
      //2-1创建当前日期对象
      var today = new Date();
      //优化1把月份换成大写的
      // var month = today.getMonth()+1;
      // switch(month){
      // 	case 1:
      // 	month ="一";
      // 	break;
      // 	case 2:
      // 	month ="二";
      // 	break;
      // 	case 3:
      // 	month ="三";
      // 	break;
      // 	case 4:
      // 	month ="四";
      // 	break;
      // 	case 5:
      // 	month ="五";
      // 	break;
      // 	case 6:
      // 	month ="六";
      // 	break;
      // 	case 7:
      // 	month ="七";
      // 	break;
      // 	case 8:
      // 	month ="八";
      // 	break;
      // 	case 9:
      // 	month ="九";
      // 	break;
      // 	case 10:
      // 	month ="十";
      // 	break;
      // 	case 11:
      // 	month ="十一";
      // 	break;
      // 	case 12:
      // 	month ="十二";
      // 	break;
      // }
      // var yue = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];
     //数组方法，注意获取的月份不加1，因为数组的索引和月份都是从零开始的

      //优化1把星期换成大写的
      // var week = today.getDay();
      // switch(week){
      // 	case 0:
      // 	week ="七";
      // 	break;
      // 	case 1:
      // 	week ="一";
      // 	break;
      // 	case 2:
      // 	week ="二";
      // 	break;
      // 	case 3:
      // 	week ="三";
      // 	break;
      // 	case 4:
      // 	week ="四";
      // 	break;
      // 	case 5:
      // 	week ="五";
      // 	break;
      // 	case 6:
      // 	week ="六";
      // 	break;
      	
      // }
      // var week = ["日","一","二","三","四","五","六"];
      
      //优化：吧月和星期合并一个数组，统一调用
      //
    var zong=["日","一","二","三","四","五","六","七","八","九","十","十一","十二"];
      //时分秒变成两位数显示
      var hours=today.getHours();
      // if(hours<10){
      // 	hours="0"+hours;
      // }
      var minutes=today.getMinutes();
      // if(minutes<10){
      // 	minutes="0"+minutes;
      // }
      var seconds=today.getSeconds();
      // if(seconds<10){
      // 	seconds="0"+seconds;
      // }
  
	  //2-2 dateBox内写入月日星期
	   // dateBox.innerHTML = today.getFullYear() + "年"+ "&nbsp" + yue[today.getMonth()] + "月" + "&nbsp" + today.getDate() + "日" + "&nbsp" + "星期"+week[today.getDay()];
     
     dateBox.innerHTML = today.getFullYear() + "年"+ "&nbsp" + zong[today.getMonth()+1] + "月" + "&nbsp" + today.getDate() + "日" + "&nbsp" + "星期"+zong[today.getDay()];


	   //2-3timeBox内写入时分秒
	   timeBox.innerHTML = getXianShi(hours) + ":" + getXianShi(minutes) + ":" + getXianShi(seconds);  
    }


   //3.让时间动起来
    var t = setInterval(clock,1000);//开启定时器
    
    //4.点击按钮停止更新
    var btn = document.getElementById("btn");
    btn.onclick = function(){
    	clearInterval(t);//停止定时器
    }

    //5.点击继续按钮，继续更新
     var btn2 = document.getElementById("btn2");
     btn2.onclick = function(){
        t = setInterval(clock,1000);//开启定时器
    }

    } //加载函数
	</script>
</head>
<body>
	<div id="date"></div>
	<div id="time"></div>
	<button id="btn">停止更新</button>
	<button id="btn2">继续更新</button>
	<!--要点
	1.书写一个项目，首先分析HTML的结构，然后写css样式，最后写js
	2.js放在head内,必须先写加载函数，所有的js代码都写在加载函数内部
	3.先获取节点（标签）


	-->
</body>
</html>